<template>
  <div class="container">
    <div class="rwName">任务名称【{{ title }}】</div>
    <div class="totalData">
      <div class="title">短信发送数据</div>
      <el-row :gutter="24" class="totalBlock">
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.total_count : '0' }}</div>
            <div class="item-brief">总号码数</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.sent : '0' }}</div>
            <div class="item-brief">已发送</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.count_sum : '0' }}</div>
            <div class="item-brief">有效数</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.be_go_percent : '0' }}%</div>
            <div class="item-brief">有效率</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.if_click_count : '0' }}</div>
            <div class="item-brief">营销链接点击数</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.click_percent : '0' }}</div>
            <div class="item-brief">点击链接客户占比</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="search">
      <searchui :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchui>
    </div>
    <div class="detailTable">
      <el-table :data="smsInfoList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
        <el-table-column align="center" header-align="center" label="序号" prop="sms_id" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="日期" prop="send_date"></el-table-column>
        <el-table-column align="center" header-align="center" label="当日发送数量" prop="total_count"></el-table-column>
        <el-table-column align="center" header-align="center" label="有效数量" prop="count_sum"></el-table-column>
        <el-table-column align="center" header-align="center" label="有效率" prop="be_go_percent"></el-table-column>
        <el-table-column align="center" header-align="center" label="营销链接点击数" prop="if_click_count"></el-table-column>
        <el-table-column align="center" header-align="center" label="点击链接客户占比" prop="click_percent"></el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200"></el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { smsEnterTasksStatisticsApi, smsEnterTasksLisApi } from '@/api/message'
export default {
  name: 'detail',
  data() {
    return {
      title: '',
      smStatisticsInfo: {},
      smsInfoList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '时间选择',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择时间',
        },
      ],
      isAccording: true,
      searchParams: {
        start_time: '',
        end_time: '',
      },
    }
  },
  created() {
    this.title = this.$route.query.title
  },
  mounted() {
    // 处理权限
    this.getSmStatistics()
    this.smsEnterTasksList()
  },
  methods: {
    // 列表查询
    searchParma(e) {
      if (e.time) {
        this.searchParams.start_time = e.time[0]
        this.searchParams.end_time = e.time[1]
      } else {
        this.searchParams.start_time = ''
        this.searchParams.end_time = ''
      }
      this.pageIndex = 1
      this.smsEnterTasksList()
    },
    getSmStatistics() {
      const info = Object.assign({ id: this.$route.query.id, batch: this.$route.query.batch })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsEnterTasksStatisticsApi(formData)
        .then((res) => {
          this.smStatisticsInfo = res.data
        })
        .catch((e) => {
          this.smStatisticsInfo = {}
        })
    },
    smsEnterTasksList() {
      const info = Object.assign({ batch: this.$route.query.batch, pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsEnterTasksLisApi(formData)
        .then((res) => {
          this.smsInfoList = res.result.items
          this.totalPage = res.result.total
        })
        .catch((e) => {
          this.smsInfoList = []
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.smsEnterTasksList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.smsEnterTasksList()
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .rwName {
    padding: 24px 32px 0;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
  }
  .totalData {
    width: 100%;
    background: #fff;
    padding: 24px 32px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .totalBlock {
      border: 1px solid #f0f0f0;
      margin: 0 !important;
      .totalItem {
        padding: 20px 0 !important;
        .item {
          width: 100%;
          border-right: 1px solid #e6e6e6;
          flex-direction: column;
          display: flex;
          align-items: center;
          .item-num {
            font-size: 24px;
            font-weight: 700;
            color: #262626;
            margin-top: -2px;
          }
          .item-brief {
            margin-top: 4px;
            color: #8c8c8c;
            font-size: 14px;
          }
        }
        &:last-child {
          .item {
            border-right: none;
          }
        }
      }
    }
  }
  .search {
    padding: 0 32px 24px;
  }
  .detailTable {
    padding: 0 32px;
  }
}
</style>
